<template>
    <div>
        <!-- 发现页 -->
        <div id="header">
            <router-link :class="{cur:cur=='1'}" :to="`/home/seed/zixun?family=1`">资讯</router-link>
            <router-link :class="{cur:cur=='daySale'}" to="/home/seed/zixun?family=daySale" >拍卖日程</router-link>
            <router-link :class="{cur:cur=='result'}" to="/home/seed/zixun?family=result" >拍卖结果</router-link>
            <router-link :class="{cur:cur=='2'}" :to="`/home/seed/zixun?family=2`">精品赏析</router-link>
        </div>
        <!-- 主体部分 -->
        <div id="mainer">
            <router-view/>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                cur: this.$route.query.family,
            }
        },
        watch:{
            $route(newVal){
                this.cur=newVal.query.family
            }
        },
    }
</script>

<style lang="scss" scoped>
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    background-color: #fff;
    z-index: 2;
    align-items: flex-start;
    justify-content: center;
    color: #77818d;
    box-sizing: border-box;
    border-bottom: 1px solid #efeef3;       
     >a {
        color: #77818d;
        display: block;
        font-family: '黑体';
        box-sizing: border-box;
        margin: 0 5px;
        padding: 10px 0;
        font-weight: bold;
         &.cur {
             color: #1e2b3b;
             border-bottom: 3px solid #a63642;
         }
     }
}
#mainer {
    margin-top: 2.5em;
    margin-bottom: 3em;
}
</style>